let doctor_list = new Vue({
    el: "#body",
    data: {
        departments: [],
        doctors: [],
        doc: "",
        file: "",
       oficId:'ALL'

    },
    methods: {
        loadDoctors: function () {
            axios({
                url: "/portal/doctors/getalldoctors",
                method: "get",
            }).then(function (r) {
                let list=r.data;
                //判断要加载哪些科室的医生,如果是初始值就说要加载全部医生
                if(doctor_list.oficId==="ALL"){
                    console.log("officeId确实是ALL")
                    doctor_list.doctors=r.data;
                }else{
                    //先让doctors数组为零,以清空所有的元素,
                    doctor_list.doctors=[];
                    //根据变化后的,来确定要找哪个科室的医生
                    //用for循环来筛选
                    for(let i=0;i<list.length;i++){
                        //如果该元素的科室编号和传入值相同,就将其放入doctors数组
                        if(list[i].officeId===doctor_list.oficId){
                            console.log("放进了一个"+list[i].officeId+"的医生" )
                            doctor_list.doctors.push(list[i]);
                        }
                    }

                }

            })

        },
        //查看医生详细信息
        loadTheDoc: function (doc) {
            console.log("要查看的医生:" + JSON.stringify(doc));
            $("#img1").attr("src", doc.headimgUrl)
            $("#docname").html(doc.name);
            $("#docgender").html(doc.gender);
            $("#docmail").html(doc.email);
            $("#docphone").html(doc.phone);
            $("#dpname").html(doc.departmentName);
            $("#docbloodtype").html(doc.bloodtype);
            $("#docbirthday").html(doc.birthday);
            $("#docdescription").html(doc.otherinfo);


        },
        //编辑当前选中的医生,传过来的参数就是当前医生对象
        editThisDoc: function (doc) {

            console.log("运行了编辑方法")
            doctor_list.doc = doc;
            //在各input元素中放入选中医生的原始数据,以便参照修改
            $("#img2").attr("src", doc.headimgUrl)
            $("#inputname").val(doc.name);
            $("#inputmail").val(doc.email);
            $("#inputphone").val(doc.phone);

            //异步请求加载所有科室选项
            axios({
                url: "/portal/departmentOffice/medicaldepartment",
                method: "get",
            }).then(function (r) {
                let d = r.data;
                //移除之前加载的选项,重新加载当前选项
                $("#selectDepartment option").remove();
                $("#selectDepartment").append("<option value='' id=''>请选择---</option>")
                for (let i = 0; i < d.length; i++) {
                    let option = "<option id='" + d[i].id + "'>" + d[i].officeName + "</option>"
                    //如果该部门是之前选的,就显示为首选项
                    if (doc.officeId == d[i].id) {
                        option = "<option id='" + d[i].id + "' selected>" + d[i].officeName + "</option>"
                    }
                    $("#selectDepartment").append(option)
                }

            })
            //使原本的血型为选中状态
            $("option[value='" + doc.bloodtype + "']").attr("selected", "selected");
            $("#birthday").val(doc.birthday)
            $("#introduce").text(doc.otherinfo);
            $("input[value='" + doc.gender + "']").attr("checked", "checked")
            //获取上传的头像图片
            $("#imginput").on("change", function () {
                doctor_list.file = this.files[0];
                console.log("传入图片的名字:" + doctor_list.file.name);
                var fr = new FileReader();
                fr.readAsDataURL(doctor_list.file);
                fr.onload = function () {
                    //将上传的图片显示在网页上
                    $('#img2').attr('src', fr.result)
                }
                $("#label").text(doctor_list.file.name)

            })
        },
        submitEdit: function () {
            console.log("进入了submit")
            let id = doctor_list.doc.id;

            let img = doctor_list.file;
            let name = $("#inputname").val();
            let email = $("#inputmail").val();
            let phone = $("#inputphone").val();
            //这里本来用let声明,结果发现得到的值是undefined,于是就用了var
            var departmentId = $("#selectDepartment option:selected").attr("id");
            let bloodType = $("#bloodType option:selected").val();
            let birthday = $("#birthday").val();
            let introduce = $("#introduce").val();
            let gender = $(":radio:checked").val();
            console.log("inputname:" + name);
            console.log("inputmail:" + email);
            console.log("inputphone:" + phone);
            console.log("selectDepartment:" + departmentId);
            console.log("bloodType:" + birthday);
            console.log("introduce:" + introduce);
            console.log("radio:" + gender);

            let form = new FormData;
            form.append("id", id);
            form.append("name", name);
            form.append("phone", phone);
            form.append("email", email);
            form.append("departmentId", departmentId);
            form.append("bloodType", bloodType);
            form.append("birthday", birthday);
            form.append("picture", img);
            form.append("introduce", introduce);
            form.append("gender", gender);
            axios({
                url: "/portal/doctors/updatedoctors",
                method: "post",
                data: form

            }).then(function (r) {
                $("#mymodal2").hide();
                alert(r.data);
                location.reload();
            })
        },
        deleteDoc: function (doc) {
            alert("确认删除'" + doc.name + doc.id + "'医生?")
            console.log(JSON.stringify(doc));
            axios({
                url: "/portal/doctors/deleteDoc",
                method: "get",
                params: {
                    id: doc.id
                }
            }).then(function (r) {
                alert(r.data);
                location.reload();
            })
        },

    },

    created: function () {
        this.loadDoctors();
        axios({
            url: "/portal/departmentOffice/medicaldepartment",
            method: "get",
        }).then(function (r) {
            doctor_list.departments = r.data;
            console.log("所有的部门信息" + JSON.stringify(r.data))
        })

    }
})

